<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>汽车管理页面</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
			text-decoration: none;
		}
		coder{
			display: none;
		}
		#container{
			width: 800px;
			height: 500px;
			background: #ccc;
		}
		#top{
			height: 100px;
			width: 100%;
		}
		#middle{
			height: 400px;
			width: 100%;
			display: flex;
		}
		#left{
			height: 100%;
			width: 20%;
			border: 1px solid #333;
		}
		#right{
			height: 100%;
			width: 80%;
			border: 1px solid #333;
		}
		#foot{}
		#commands{
			width: 100%;
		}
		#commands > a >li{
			width: 100%;
			height: 30px;
			background: #fff;
			text-align: center;
			line-height: 30px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="top"></div>
		<div id="middle">
			<div id="left">
				<ul id="commands">
				<a href="javascript:setRight('add_car')">
					<li>添加汽车</li></a>
					<a href="javascript:setRight('edit_car')">
					<li>修改参数</li></a>
					<a href="javascript:setRight('drop_car')">
					<li>汽车下架</li></a>
				</ul>
			</div>
			<div id="right">
				
			</div>
		</div>
		<div id="foot"></div>
	</div>
	<script type="text/javascript">

	function setRight(id){
		var source = document.getElementById(id);
		var target = document.getElementById('right');
		target.innerHTML=source.innerHTML;
	}
	function submitCarInfo(id) {
		var fom = document.getElementById(id);
		var formData = new FormData(fom);
		fetch('/car_h1811/add_car', {
  		method: 'POST',
  		body: formData
		})
		.then(response => response.json())
		.catch(error => console.error('Error:', error))
		.then(response => console.log('Success:', response));
	}
	window.onload=function(w){
		setRight('add_car');//默认界面是添加汽车
	}
	</script>
	<coder id="add_car">
		<h1>添加汽车</h1>
		<form id="add_car_fom">
			<div class="item">
				<label for="type">车型</label>
				<input type="text" name="type" placeholder="请输入车型">
			</div>
			<div class="item">
				<label for="pinpai">品牌</label>
				<input type="text" name="pinpai">
			</div>
			<div class="item">
				<label for="price">价格</label>
				<input type="text" name="price">
			</div>
			<div class="item">
				<label for="structure">几箱车</label>
				<input type="text" name="structure">
			</div>
			<div class="item">
				<label for="local_main">图片</label>
				<input type="file" name="local_main">
			</div>
			<input type="button" onclick="submitCarInfo('add_car_fom')" value="确认提交">
		</form>
	</coder>
	<coder id="edit_car">
		<h1>修改汽车</h1>
	</coder>
	<coder id="drop_car">
		<h1>汽车下架</h1>
	</coder>
</body>
</html>